﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    .alternative 
    {
    	background-color:Red;
    }
    </style>
</head>
<body>
    <div>
        <table>
            <caption>Animals</caption>
            <tr>
                <th>Cats</th>
                <td>Tiger</td>
                <td>Cheetah</td>
            </tr>
            <tr>
                <th>Dogs</th>
                <td>Grey wolf</td>
                <td>Cape hunting dog</td>
            </tr>
            <tr>
                <th>Lemurs</th>
                <td>Indri</td>
                <td>Sifaka</td>
            </tr>
        </table>
    </div>
    <div>
        <h1>Grouping Rows</h1>
        <table>
            <thead>
                <tr>
                    <td>Header 1</td>
                    <td>Header 2</td>
                    <td>Header 3</td>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <td>Footer 1</td>
                    <td>Footer 2</td>
                    <td>Footer 3</td>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Cell 1</td>
                    <td>Cell 2</td>
                    <td>Cell 3</td>
                </tr>
                <!-- etc. -->
            </tbody>
        </table>
    </div>
    <div>
        <h1>Targeting Columns</h1>
        <table>
            <colgroup span="2" class="alternative"></colgroup>
            <tr>
                <th>Cats</th>
                <th>Dogs</th>
                <th>Lemurs</th>
            </tr>
            <tr>
                <th>Cats2</th>
                <th>Dogs2</th>
                <th>Lemurs2</th>
            </tr>
            <!-- etc. -->
        </table>
    </div>
    <div>
        <h1>Targeting Columns</h1>
        <table summary="A table contains information of animals">
            <colgroup>
            <col />
            <col span="2" class="alternative" />
            </colgroup>
            <tr>
                <th>Cats</th>
                <th>Dogs</th>
                <th>Lemurs</th>
            </tr>
            <tr>
                <th>Cats2</th>
                <th>Dogs2</th>
                <th>Lemurs2</th>
            </tr>
            <!-- etc. -->
        </table>

    </div>
    <div>
        <h1>Associating Header</h1>
        <table>
            <tr>
                <th scope="col">Cats</th>
                <th scope="col">Dogs</th>
                <th scope="col">Lemurs</th>
            </tr>
            <tr>
                <td>Tiger</td>
                <td>Grey Wolf</td>
                <td>Indri</td>
            </tr>
            <!-- etc. -->
        </table>
    </div>
    <div>
        <h1>Associating cell to headers</h1>
        <table>
        <tr>
            <th colspan="2" id="carnivores">Carnivores</th>
            <th id="primates">Primates</th>
        </tr>
        <tr>
            <th id="cats" headers="carnivores">Cats</th>
            <th id="dogs" headers="carnivores">Dogs</th>
            <th id="lemurs" headers="primates">Lemurs</th>
        </tr>
        <tr>
            <td headers="carnivores cats">Tiger</td>
            <td headers="carnivores dogs">Grey Wolf</td>
            <td headers="primates lemurs">Indri</td>
        </tr>
        <!-- etc. -->
        </table>
    </div>
</body>
</html>
